<template>
  <div>
    <a-button type="primary" @click="getChangeDataFun()">获取选中</a-button>
    <ITransferTree ref="transferRef" :transferTreeData="transferTreeData" @chagneTreeDataFun="chagneTreeDataFun"></ITransferTree>
    <LibDoc :libDocData="libDocData"></LibDoc>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import LibDoc from '@/components/LibDoc.vue'
import { LibDocInterface } from '@/service/LibDocService'
import { ITransferTree } from 'wd-platform-library'
import { TransferTreeDataInterface } from 'wd-platform-library/lib/src/ITransferTree/src/ITransferTreeInterFace'

export default defineComponent({
    name: 'i_transfer_demo',
    setup () {
        const transferRef = ref()
        const transferTreeData = reactive < TransferTreeDataInterface<any> >({
            dataList: [],
            checkList: [],
            treeOptions: {
                checkStrictly: false,
                defaultExpandAll: false
            },
            options: {
                disabled: false
            },
            replaceField: { key: 'id', title: 'name', disabled: 'disabled', children: 'children' }
        })

        onMounted(() => {
            setTimeout(() => {
                transferTreeData.dataList = [{ id: '614405618463145984', name: '信息流', children: [{ id: '614405722247004160', name: '信息流-百度' }, { id: '614406000362913792', name: '信息流-头条' }, { id: '614407255403528192', name: '信息流-广点通' }, { id: '614408763180318720', name: '信息流-抖音' }, { id: '614409031498334208', name: '信息流-快手' }] }, { id: '614409351171407872', name: '渠道代理', children: [{ id: '614409544017117132', name: '考研营' }, { id: '614409544017117133', name: '爱思学' }] }, { id: '614411436604522496', name: '社群运营', children: [{ id: '614411436604522497', name: '微信群' }] }]
            }, 2000)
        })
        const getChangeDataFun = () => {
            alert('获取选中:   ' + transferRef.value.checkTransferDataList())
        }
        const chagneTreeDataFun = (keys:string[]) => {
            alert('左右切换:  ' + keys)
        }
        const libDocData: LibDocInterface = {
            title: '代码示例',
            docList: [
                {
                    label: '完整代码',
                    type: 'pre',
                    value: `
<template>
  <div>
    <a-button type="primary" @click="getChangeDataFun()">获取选中</a-button>
    <ITransferTree ref="transferRef" :transferTreeData="transferTreeData" @chagneTreeDataFun="chagneTreeDataFun"></ITransferTree>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue'
import { ITransferTree } from 'wd-platform-library'
import { TransferTreeDataInterface } from 'wd-platform-library/lib/src/ITransferTree/src/ITransferTreeInterFace'

export default defineComponent({
    name: 'i_transfer_demo',
    setup () {
        const transferRef = ref()
        const transferTreeData = reactive < TransferTreeDataInterface<any> >({
            dataList: [],
            checkList: [],
            treeOptions: {
                checkStrictly: false,
                defaultExpandAll: false
            },
            options: {
                disabled: false
            },
            replaceField: { key: 'id', title: 'name', disabled: 'disabled', children: 'children' }
        })

        onMounted(() => {
            setTimeout(() => {
                transferTreeData.dataList = [{ id: '614405618463145984', name: '信息流', children: [{ id: '614405722247004160', name: '信息流-百度' }, { id: '614406000362913792', name: '信息流-头条' }, { id: '614407255403528192', name: '信息流-广点通' }, { id: '614408763180318720', name: '信息流-抖音' }, { id: '614409031498334208', name: '信息流-快手' }] }, { id: '614409351171407872', name: '渠道代理', children: [{ id: '614409544017117132', name: '考研营' }, { id: '614409544017117133', name: '爱思学' }] }, { id: '614411436604522496', name: '社群运营', children: [{ id: '614411436604522497', name: '微信群' }] }]
            }, 2000)
        })
        const getChangeDataFun = () => {
            alert('获取选中:   ' + transferRef.value.checkTransferDataList())
        }
        const chagneTreeDataFun = (keys:string[]) => {
            alert('左右切换:  ' + keys)
        }  
        return {
            chagneTreeDataFun,
            transferRef,
            getChangeDataFun,
            transferTreeData,
        }
    },
    components: {
        ITransferTree,
    }
})
<script>`
                }
            ]
        }
        return {
            chagneTreeDataFun,
            transferRef,
            getChangeDataFun,
            transferTreeData,
            libDocData
        }
    },
    components: {
        ITransferTree,
        LibDoc
    }
})
</script>

<style lang="scss" scoped>
.cus_template {
  display: flex;
}
</style>
